<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<p>段落1</p>
<p>段落2</p>

<button onclick="buttonClick()">隐藏所有的p标签</button><br>
<button onclick="buttonShowClick()">显示所有的p标签</button> <br>

<div id="div1" style="width: 300px;height: 200px; background: lightyellow"></div>
<button id="button1" >隐藏div1</button><br>

<div class="div2" style="width: 300px;height: 200px;background: orange"></div>

<button class="button2" >隐藏div2</button>


<script>

    /*
    * 选择标签 $("p")
    * */
    function buttonClick() {

        $("p").hide();
    };
    function buttonShowClick() {

        $("p").show();

    };


    /*
    * id选择器 $("#div1")
    * */

    $("#button1").click(function () {

        $("#div1").hide();

    })


    /*
    * class选择器 $(".div2")
    * */

    $(".button2").click(function () {

        $(".div2").hide();

    })






</script>

</body>
</html>